<template>
	<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
	name: 'bar',
	props: {
		chartData: {
			type: Array,
			default: () => [],
		},
		barLed: {
			type: Object,
			default: { yUnit: '充电量（万度）', xUnit: '月度', background: '#fff', xLine: '#6d6d6d', label: 'rgb(125, 133, 144)' },
		},
		option: {
			type: Object,
			default: () => ({ name: 123 }),
		},
		width: {
			type: String as PropType<string>,
			default: '100%',
		},
		height: {
			type: String as PropType<string>,
			default: '280px',
		},
		// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
		seriesColor: {
			type: String,
			default: '#1890ff',
		},
		// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
	},
	setup(props) {
		let xLabel = ['语文', '数学', '英语', '科学', '历史'];
		let barLed = props.barLed;
		const chartRef = ref<HTMLDivElement | null>(null);
		const { setOptions, echarts, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
		onMounted(() => {
			window.addEventListener('resize', function () {
				resize();
			});
		});
		const option = reactive({
			// tooltip: {
			//   trigger: 'axis',
			//   axisPointer: {
			//     type: 'shadow',
			//     label: {
			//       show: true,
			//       backgroundColor: '#333',
			//     },
			//   },
			// },
			tooltip: {},
			// backgroundColor: '#0f375f',
			animation: false,
			grid: {
				top: '15%',
				bottom: '20%', //也可设置left和right设置距离来控制图表的大小
			},
			xAxis: {
				name: barLed.xUnit,
				data: xLabel,
				axisLine: {
					show: true, //隐藏X轴轴线
					lineStyle: {
						color: barLed.xLine,
					},
				},
				axisTick: {
					show: false, //隐藏X轴刻度
				},
				axisLabel: {
					show: true,
					margin: 14,
					fontSize: 12,
					textStyle: {
						color: barLed.label, //X轴文字颜色
					},
				},
			},
			yAxis: [
				{
					name: barLed.yUnit,
					// left: '-40px',
					type: 'value',
					// alignTicks: true,
					// nameTextStyle: {
					// 	color: barLed.label,
					// 	rotate: 30,//旋转角度
					// 	padding: [0, 0, 0, 20],
					// 	width: 330,
					// },
					gridIndex: 0,
					// min: 0,
					// interval: 25,
					splitLine: {
						show: false,
						lineStyle: {
							color: '#113763',
							width: 1,
						},
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: '#11417a',
						},
					},
					axisLabel: {
						show: true,

					},
				},
			],
			series: [
				{
					name: '充电量',
					type: 'bar',
					barWidth: 30,
					itemStyle: {
						normal: {
							// barBorderRadius: 100,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#e8c73e',
								},
								{
									offset: 1,
									color: '#f7ebb9',
								},
							]),
						},
					},
					data: [20, 80, 100, 40, 34, 90, 60],
					z: 10,
					zlevel: 0,
					label: {
						show: true,
						position: 'top',
						distance: 4,
						fontSize: 12,
						color: '#01fff4',
					},
				},
				{
					// 分隔
					type: 'pictorialBar',
					name: '充电量',
					tooltip: {
						show: false,
					},
					itemStyle: {
						normal: {
							color: barLed.background,
						},
					},
					symbolRepeat: 'fixed',
					symbolMargin: 3,
					symbol: 'rect',
					symbolClip: true,
					symbolSize: [31, 6],
					symbolPosition: 'start',
					symbolOffset: [0, -1],
					// symbolBoundingData: this.total,
					data: [20, 80, 100, 40, 34, 90, 60],
					width: '100%',
					z: 0,
					zlevel: 1,
				},
			],
		});

		watchEffect(() => {
			props.chartData && initCharts();
		});

		function initCharts() {
			if (props.option) {
				Object.assign(option, cloneDeep(props.option));
			}
			let seriesData = props.chartData.map((item) => {
				return item.value;
			});
			let xAxisData = props.chartData.map((item) => {
				return item.name;
			});
			option.series[0].data = seriesData;
			option.series[1].data = seriesData;
			// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			option.series[0].color = props.seriesColor;
			// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			option.xAxis.data = xAxisData;
			setOptions(option);
		}
		return { chartRef };
	},
});
</script>
